<template>
<div class="user-container">
    <el-drawer title="个人信息" :visible.sync="drawer" :direction="direction" :append-to-body="true" custom-class="user-drawer" size="30%" :before-close="closeDrawer">
        <div class="info-drawer">
            <div class="info-header">
                <img :src="avatar" class="avatar" />
                <el-upload class="avatar-uploader" :headers="header" :action="uploadUrl + '/api/ucenter.user/avatar'" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <el-button class="upload-btn" size="small" type="primary">点击上传</el-button>
                </el-upload>
                <span class="edit-action">
                    <!-- <span @click="editInfo"
              ><i style="margin-right: 5px" class="el-icon-edit"></i>编辑</span
            > -->
                    <span style="margin-left: 10px" @click="changePwd"><i style="margin-right: 5px" class="el-icon-key"></i>修改密码</span>
                </span>
            </div>
            <div class="info-content">
                <el-form label-position="left" label-width="80px" :model="userForm" :rules="userRoles" ref="userForm">
                    <el-form-item label="姓名:" prop="realName">
                        <el-input v-if="isEdit" v-model="userForm.realname"></el-input>
                        <span class="form-span" v-if="!isEdit">{{
                userForm.realname
              }}</span>
                    </el-form-item>
                    <el-form-item label="昵称:">
                        <span class="form-span">{{ userForm.nickname }}</span>
                    </el-form-item>
                    <el-form-item label="手机号:">
                        <span class="form-span">{{ userForm.mobile }}</span>
                    </el-form-item>
                    <el-form-item label="部门:">
                        <span class="form-span">{{ userForm.department }}</span>
                    </el-form-item>
                    <el-form-item label="角色:">
                        <span class="form-span">{{ userForm.role }}</span>
                    </el-form-item>
                    <el-form-item v-if="isEdit">
                        <el-button type="primary" @click="saveEdit('userForm')">保存</el-button>
                        <el-button @click="cancelEdit">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </el-drawer>
    <change-pwd ref="changePwd"></change-pwd>
</div>
</template>

<script>
import ChangePwd from "./components/changePwd.vue";
import {
    getToken
} from "@/utils/auth";
import {
    getUserInfoApi
} from "@/api/ucenter/user";

export default {
    components: {
        ChangePwd,
    },
    data() {
        return {
            header: {
                "X-Token": getToken(),
            },
            uploadUrl: process.env.VUE_APP_BASE_API,
            drawer: false,
            direction: "rtl",
            avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
            userForm: {
                realname: "",
                mobile: "",
                department: "",
                nickname: "",
                role: ''
            },
            isEdit: false, //是否是编辑状态
            userRoles: {
                realName: [{
                    required: true,
                    message: "请输入真实姓名",
                    trigger: "blur"
                }, ],
            },
        };
    },
    created() {
        this.getUserInfo()
    },
    watch: {

    },
    methods: {
        showDrawer() {
            this.drawer = true;
        },
        closeDrawer() {
            this.drawer = false;
            this.isEdit = false;
        },
        getUserInfo() {
            getUserInfoApi().then(res => {
                if (res.code == 200) {
                    let user = res.data
                    this.userForm = user.user
                    this.userForm.department = user.department
                    this.userForm.role = user.role
                    this.avatar = user.user.avatar
                    let btnRules = user.rules
                    localStorage.setItem('btnRules', btnRules)
                }
            })
        },
        // 上传成功
        handleAvatarSuccess(res, file) {
            let avatar = res.data.path;
            this.avatar = avatar;
            this.getUserInfo()
            this.$store.dispatch('user/resetAvatar', this.avatar)
            this.$message.success("修改头像成功");
        },
        // 上传判断
        beforeAvatarUpload(file) {
            let allowImageTypes = ['image/jpeg', 'image/png', 'image/jpg']
            const isAllowImages = allowImageTypes.includes(file.type);
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isAllowImages) {
                this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isAllowImages && isLt2M;
        },
        // 编辑信息
        editInfo() {
            this.isEdit = true;
        },
        // 保存编辑
        saveEdit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$message.success("编辑成功");
                    this.isEdit = false;
                } else {
                    return false;
                }
            });
        },
        // 取消编辑
        cancelEdit() {
            this.isEdit = false;
        },
        // 修改密码
        changePwd() {
            this.$refs["changePwd"].showDialog();
        },
    },
};
</script>

<style lang="scss">
.el-drawer__header span:focus {
    outline: 0;
}

.info-drawer {
    padding: 0 20px;

    .info-header {
        height: 80px;
        line-height: 80px;
        border-bottom: 1px dashed #d9d9dd;

        .avatar-uploader {
            display: inline-block;
        }

        .avatar {
            width: 70px;
            height: 70px;
            float: left;
            border-radius: 10px;
        }

        .upload-btn {
            margin-left: 20px;
        }

        .edit-action {
            float: right;
            font-size: 13px;
            color: #595959;
            cursor: pointer;
        }
    }

    .info-content {
        padding-top: 10px;

        .el-form-item {
            margin-bottom: 10px;
        }

        .form-span {
            color: #595959;
            font-size: 14px;
        }
    }
}
</style>
